<script lang='ts' setup>
import { FormInstance } from 'element-plus';
import { useDialog } from '@renderer/components/Dialog/index.vue'

const dialog = ref()
const title = ref('编辑数据源')
const loading = ref(true)

useDialog<any>((data) => {
  if (data && data.id) {
    $request.get(`/dataSource/${data.id}`).then(res => {
      Object.assign(formData,  res.data)
      nextTick(() => {
        setTimeout(() => {
          loading.value = false
        }, 100)
      })
    })
  } else {
    loading.value = false
  }
})

const formData = reactive({
  name: '',
  description: '',
  type: '',
  ip: '',
  port: 3306,
  username: '',
  password: '',
  database: '',
  databaseType: '',
  schema: ''
})

const rules = {
  name: [
    { required: true, message: '请输入数据源名称' },
  ],
  description: [
    { required: true, message: '请输入数据源描述' },
  ],
  type: [
    { required: true, message: '请选择数据源类型' },
  ],
  ip: [
    { required: true, message: '请选择数据库地址' },
  ],
  port: [
    { required: true, message: '请选择数据库端口' },
  ],
  username: [
    { required: true, message: '请选择数据库账号' },
  ],
  password: [
    { required: true, message: '请选择数据库密码' },
  ],
  database: [
    { required: true, message: '请输入数据库名称' },
  ],
  databaseType: [
    { required: true, message: '请输入数据库类型' },
  ],
}

const dataSourceFormRef = ref<FormInstance>()

function handleSave(close: () => void):void {
  dataSourceFormRef.value?.validate((valid) => {
    if (valid) {
      $request.post('/dataSource', formData).then(() => {
        window.eventer.emit('refresh:data-source', {})
        close()
      })
    }
  })
}

</script>

<script lang="ts">
import { open } from '@renderer/components/Dialog/index.vue'
export function openDialog(item: any): void {
  open({
    url: '/dialog/edit/dataSource',
    width: 500,
    height: 630,
    ext: item
  })
}


</script>

<template >
  <Dialog ref="dialog" :title="title" @save="handleSave">
    <template #default="{height}">
      <div v-loading="loading"  :style="{ minHeight: height }">
        <el-form  v-if="!loading" ref="dataSourceFormRef" :rules="rules" :model="formData" label-width="85px" label-position="left">
          <el-form-item prop="name" label="数据源名称">
            <el-input style="width: 100%;" placeholder="请输入数据源名称"  v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item prop="description" label="数据源描述">
            <el-input placeholder="请输入数据源描述" show-word-limit :rows="2" type="textarea" v-model="formData.description"></el-input>
          </el-form-item>
          <el-form-item prop="type" label="数据源类型">
            <el-select  placeholder="请选择数据源类型" v-model="formData.type">
              <el-option value="DATABASE" label="数据库"></el-option>
              <!-- <el-option :value="值2" label="显示信息"></el-option> -->
            </el-select>
          </el-form-item>
          <template v-if="formData.type === 'DATABASE'">
            <el-form-item prop="type" label="数据库类型">
            <el-select  placeholder="请选择数据库类型" v-model="formData.databaseType">
              <el-option value="MYSQL" label="MySQL"></el-option>
            </el-select>
          </el-form-item>
            <el-form-item prop="ip" label="数据库地址">
              <el-input style="width: 100%;" placeholder="请输入数据库地址 example: x.x.x.x"  v-model="formData.ip"></el-input>
            </el-form-item>
            <el-form-item prop="port" label="数据库端口">
              <el-input-number :min="1" :max="65535" placeholder="请输入数据库端口 example: 1 - 65535"  v-model="formData.port"></el-input-number>
            </el-form-item>
            <el-form-item prop="username" label="数据库账号">
              <el-input style="width: 100%;" placeholder="请输入数据库账号"  v-model="formData.username"></el-input>
            </el-form-item>
            <el-form-item prop="password" label="数据库密码">
              <el-input style="width: 100%;" placeholder="请输入数据库密码"  v-model="formData.password"></el-input>
            </el-form-item>
            <el-form-item prop="database" label="数据库名称">
              <el-input style="width: 100%;" placeholder="请输入数据库名称"  v-model="formData.database"></el-input>
            </el-form-item>
            <el-form-item prop="schema" label="数据库模式名">
              <el-input style="width: 100%;" placeholder="请输入数据库名称"  v-model="formData.schema"></el-input>
            </el-form-item>
          </template>
        </el-form>
      </div>
    </template>
  </Dialog>
</template>

<style scoped lang='less'>
</style>
